<template>
  <div>
    <el-card>
      <el-form ref="query" :model="query" label-width="80px" :inline="true">
        <el-form-item>
          <el-input
            v-model="query.keyword"
            placeholder="请输入内容"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search" />
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select @change="changeClaimSel()" v-model="selectdClaim">
            <el-option label="已认领" value="1"></el-option>
            <el-option label="未认领" value='0'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add" v-if="roles.includes('admin')"
            >新增</el-button
          >
        </el-form-item>
      </el-form>

      <el-table :data="dataList" style="width: 100%" border stripe>
        <el-table-column type="index" label="#" />
        <el-table-column prop="out_video_id" label="视频id" />
        <el-table-column prop="cover_url" label="视频封面">
          <template slot-scope="scope">
            <div class="video_img">
              <img :src="scope.row.cover_url" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="所属分类">
          <template slot-scope="scope">
            <div>
              {{ scope.row.categoryInfo.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="所属专栏">
          <template slot-scope="scope">
            <div>
              {{ scope.row.topicInfo.title }}
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="title" label="视频标题" />
        <el-table-column prop="desc" label="视频描述" />
        <el-table-column prop="create_time" label="上传时间" />
        <el-table-column prop="status" label="字幕状态">
          <template slot-scope="scope">
            <div>{{ videoStatus[scope.row.status] }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220px">
          <template slot-scope="scope">
            <el-button v-if="selectdClaim==1" type="text" @click="wordscreen(scope.row)"
              >字幕编辑</el-button
            >
            <el-button 
              v-if="roles.includes('admin')"
              type="text"
              @click="editWords(scope.row)"
            >单词</el-button>
            <el-button
              v-if="roles.includes('admin')"
              type="text"
              @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-button
              v-if="roles.includes('admin')"
              type="text"
              @click="del(scope.row)"
              >下架</el-button
            >
            
            <el-button
              v-if="selectdClaim==0"
              type="text"
              @click="toClaim(scope.row)"
              >认领</el-button
            >
            <el-button
              type="text"
              v-if="selectdClaim==1"
              @click="cancelClaim(scope.row)"
              >取消认领</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="query.page"
        :page-size="query.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <el-dialog :visible.sync="formVisible" title="视频编辑">
      <div>
        <el-form
          ref="formRef"
          :model="formData"
          :rules="formRules"
          label-width="80px"
        >
          <el-form-item prop="title" label="视频标题">
            <el-input
              v-model="formData.title"
              placeholder="请输入视频标题"
              type="text"
            />
          </el-form-item>
          <el-form-item prop="category_id" label="所属科室">
            {{ formExtra.category_id }}
            <el-button @click="openCategory">选择</el-button>
          </el-form-item>
          <el-form-item prop="topic_id" label="所属专栏">
            {{ formExtra.topic_id }}
            <el-button @click="openTopic">选择</el-button>
          </el-form-item>
          <el-form-item prop="desc" label="视频描述">
            <el-input
              v-model="formData.desc"
              placeholder="请输入视频描述"
              type="text"
            />
          </el-form-item>
          <el-form-item prop="cover_url" label="视频封面">
            <ImageUpload
              ref="imageupload"
              :init-image-url="formData.cover_url"
              @choose-image="uploadImage"
              height="auto"
            />
          </el-form-item>
          <el-form-item prop="out_video_id" label="视频">
            <el-button @click="openAliyunVideoList">选择</el-button>
            <div v-if="formExtra.out_video_id">
              <img
                :src="formExtra.out_video_id"
                style="margin-top: 10px; width: 200px; height: auto;"
                @click="previewVideo"
              />
            </div>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeForm">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="categoryVisible" title="选择科室">
      <div>
        <el-tree
          :data="categoryTree"
          :props="defaultProps"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <span>{{ node.label }}</span>
            <span>
              <el-button size="mini" @click="() => chooseCategory(data)"
                >选择</el-button
              >
            </span>
          </span>
        </el-tree>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="topicVisible" title="选择专栏">
      <div>
        <el-table :data="topicList" style="width: 100%" border stripe>
          <el-table-column type="index" label="#" />
          <el-table-column prop="title" label="专栏标题" />
          <el-table-column prop="cover_url" label="专栏封面">
            <template slot-scope="scope">
              <div class="video_img">
                <img :src="scope.row.cover_url" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="desc" label="专栏介绍" />
          <el-table-column prop="category_id" label="所属分类" />
          <el-table-column prop="create_time" label="创建时间" />
          <el-table-column>
            <template slot-scope="scope">
              <el-button type="text" @click="chooseTopic(scope.row)"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="topicQuery.page"
          :page-size="topicQuery.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="topicTotal"
          @current-change="handleTopicCurrentChange"
        />
      </div>
    </el-dialog>

    <el-dialog :visible.sync="aliyunVideoVisible" title="选择视频">
      <div>
        <el-table :data="aliyunVideoList" style="width: 100%" border stripe>
          <el-table-column type="index" label="#" />
          <el-table-column prop="VideoId" label="视频id" width="180" />
          <el-table-column prop="CoverURL" label="视频封面">
            <template slot-scope="scope">
              <div class="video_img">
                <img :src="scope.row.CoverURL" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="Title" label="视频标题" />
          <el-table-column prop="CreateTime" label="创建时间" />
          <el-table-column prop="Size" label="大小">
            <template slot-scope="scope">
              <div>{{ (scope.row.Size / 1048576).toFixed(2) }}M</div>
            </template>
          </el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <el-button type="text" @click="chooseAliyunVideo(scope.row)"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="aliyunVideoQuery.page"
          :page-size="aliyunVideoQuery.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="aliyunVideoTotal"
          @current-change="handleAliyunVideoCurrentChange"
        />
      </div>
    </el-dialog>

    <el-dialog :visible.sync="wordScreenVisible" title="字幕编辑" width="80%">
      <div>
        <wordscreen
          :videoId="id"
          :videoStatus="curVideoStatus"
          v-on:sure="wordscreenSure"
        />
      </div>
    </el-dialog>

    <el-dialog title="视频预览" :visible.sync="previewVideoDialogVisible">
      <div>
        <preview-video :videoId="previewVideoId"></preview-video>
      </div>
    </el-dialog>

    <el-dialog title="单词管理" :visible.sync="wordsVisible" >
      <div>
        <words />
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import AliyunUpload from '@/components/AliyunUpload/index'
import { mapGetters } from "vuex";
import ImageUpload from "@/components/ImageUpload/index";
import { getCategoryOne, getCategoryTree } from "@/api/category/index";
import { getTopicOne, getTopicList } from "@/api/topic/index";
import { getNoClaimVideo, toClaimVideo, abandonVideo } from "@/api/editorVideo";
import wordscreen from "../video/components/wordscreen";
import words from "../video/components/words";
import PreviewVideo from "@/views/video/components/previewvideo";
import {
  getPlayInfo,
  getVideoList,
  delVideo,
  getAliyunVideoList,
  videoCreate,
  videoUpdate
} from "@/api/aliyun/video";
export default {
  components: {
    // AliyunUpload,
    ImageUpload,
    wordscreen,
    PreviewVideo,
    words
  },
  data() {
    return {
      id: 0, // 更新时用
      curVideoStatus: "",
      query: {
        page: 1,
        pageSize: 10,
        keyword: ""
      },
      total: 0,
      dataList: [],
      videoStatus: {
        0: "待编辑",
        1: "正在编辑",
        2: "审核中",
        3: "审核完成"
      },

      formVisible: false,
      formData: {
        title: "",
        desc: "",
        category_id: 0,
        topic_id: 0,
        cover_url: "",
        out_video_id: ""
      },
      // 用于显示fom对应的数据 不是提交的数据
      formExtra: {
        category_id: "",
        topic_id: "",
        out_video_id: "" // 对应的封面图
      },
      formRules: {
        title: {
          required: true,
          message: "请输入视频标题",
          trigger: "blur"
        },
        category_id: {
          min: 1,
          message: "请选择科室",
          trigger: "blur",
          type: "number"
        },
        cover_url: {
          required: true,
          message: "请上传封面",
          trigger: "blur"
        },
        out_video_id: {
          required: true,
          message: "请选择视频",
          trigger: "blur"
        }
      },

      categoryTree: [],
      defaultProps: {
        children: "sub",
        label: "name"
      },
      categoryVisible: false,

      topicVisible: false,
      topicList: [],
      topicQuery: {
        page: 1,
        pageSize: 5
      },
      topicTotal: 0,

      aliyunVideoVisible: false,
      aliyunVideoQuery: {
        page: 1,
        pageSize: 2
      },
      aliyunVideoTotal: 0,
      aliyunVideoList: [],

      wordScreenVisible: false,

      previewVideoId: 0,
      previewVideoDialogVisible: false,

      wordsVisible: false,
      selectdClaim: '1'
    };
  },
  computed: {
    ...mapGetters(["roles"])
  },
  created() {
    this.changeClaimSel();
    // this.getVideoList();
  },
  methods: {
     async changeClaimSel(){
      this.query.page = 1;
      if(this.selectdClaim==1){
        this.getVideoList();
      }else{
        this.getNoClaimList();
      }
    },
    async getNoClaimList() {
      const { data: res } = await getNoClaimVideo(this.query);
      this.dataList = res.list;
      this.total = res.total;
    },
    async getVideoList() {
      const { data: res } = await getVideoList(this.query);
      this.dataList = res.list;
      this.total = res.total;
    },
    handleCurrentChange(page) {
      this.query.page = page;
      this.changeClaimSel();
    },
    add() {
      this.formVisible = true;
    },
    edit(row) {
      console.log(row);
      this.id = row.id;
      this.formVisible = true;

      // title: '',
      //   description: '',
      //   category_id: 0,
      //   topic_id: 0,
      //   cover_url: '',
      //   out_video_id: ''

      this.formData.title = row.title;
      this.formData.desc = row.desc;
      this.formData.category_id = row.category_id;
      this.formData.topic_id = row.topic_id;
      this.formData.cover_url = row.cover_url;
      this.formData.out_video_id = row.out_video_id;
      if (row.category_id) {
        getCategoryOne(row.category_id).then(res => {
          console.log(res, "category_id");
          if (res.code === 1) {
            this.formExtra.category_id = res.data.name;
          }
        });
      }
      if (row.topic_id) {
        getTopicOne(row.topic_id).then(res => {
          if (res.code === 1) {
            this.formExtra.topic_id = res.data.title;
          }
        });
      }
      getPlayInfo(row.out_video_id).then(res => {
        if (res.code === 1) {
          this.formExtra.out_video_id = res.data.VideoBase.CoverURL;
        }
      });
    },
    toClaim(row) {
      this.$confirm("是否确定认领, 是否继续?",'提示').then(async () => {
        const res = await toClaimVideo({ video_id: row.id });
        if(res.code === 1){
          this.getNoClaimList();
        }
      })
    },
    async cancelClaim(row) {
      this.$confirm("是否确认取消认领, 是否继续?",'提示').then(async () => {
        const res = await abandonVideo({ video_id: row.id });
        if(res.code ===1){
          this.getVideoList();
        }
      })
    },
    del(row) {
      this.$confirm("是否确认删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const res = await delVideo(row.id);
          if (res.code === 1) {
            this.getVideoList();
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(res => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    getTopicOne() {},
   
    async openCategory() {
      this.categoryVisible = true;
      const { data: res } = await getCategoryTree();
      console.log(res, "tree");
      this.categoryTree = res;
    },
    chooseCategory(data) {
      console.log(data);
      this.formData.category_id = data.id;
      this.formExtra.category_id = data.name;
      this.categoryVisible = false;
    },
    openTopic() {
      this.topicVisible = true;
      this.getTopicList();
    },
    async getTopicList() {
      const { data: res } = await getTopicList(this.topicQuery);
      this.topicList = res.list;
      this.topicTotal = res.total;
    },
    handleTopicCurrentChange(page) {
      this.topicQuery.page = page;
      this.getTopicList();
    },
    chooseTopic(row) {
      this.formData.topic_id = row.id;
      this.formExtra.topic_id = row.title;
      this.topicVisible = false;
    },
    openAliyunVideoList() {
      this.aliyunVideoVisible = true;
      this.getAliyunVideoList();
    },
    async getAliyunVideoList() {
      const { data: res } = await getAliyunVideoList(this.aliyunVideoQuery);
      this.aliyunVideoList = res.videoList.Video;
      this.aliyunVideoTotal = res.total;
    },
    handleAliyunVideoCurrentChange(page) {
      this.aliyunVideoQuery.page = page;
      this.getAliyunVideoList();
    },
    chooseAliyunVideo(row) {
      this.formData.out_video_id = row.VideoId;
      this.formExtra.out_video_id = row.CoverURL;
      this.aliyunVideoVisible = false;
      console.log(row);
    },

    uploadImage(item) {
      this.formData.cover_url = item.url;
    },

    closeForm() {
      this.formVisible = false;
    },
    submit() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) {
          this.$message.error("请完善必填项");
          return;
        }
        if (this.id !== 0) {
          const res = await videoUpdate(this.formData, this.id);
          if (res.code === 1) {
            this.$message.success(res.msg);
            this.formVisible = false;
            this.getVideoList();
          } else {
            this.$message.error(res.msg);
          }
        } else {
          const res = await videoCreate(this.formData);
          if (res.code === 1) {
            this.$message.success(res.msg);
            this.formVisible = false;
            this.getVideoList();
          } else {
            this.$message.error(res.msg);
          }
        }
      });
    },
    wordscreen(row) {
      this.wordScreenVisible = true;
      this.id = row.id;
      this.curVideoStatus = row.status;
    },
    wordscreenSure() {
      this.getVideoList();
      this.wordScreenVisible = false;
    },
    previewVideo() {
      this.previewVideoId = this.id;
      this.previewVideoDialogVisible = true;
    },
    editWords(row) {
      this.wordsVisible = !this.wordsVisible;
    }
  }
};
</script>

<style scoped>
.video_img img {
  width: 100px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 10px;
  margin: 10px;
}
</style>
